<template>
	<Layout showFooter>
		<template #title>意见反馈</template>
		<view class="iflex jcc feedback">
			<view class="feedback__content">
				<view class="feedback__content__textarea">
					<u-input :style="{width:'100%'}" type="textarea" maxlength="500" v-model="formData.feedbackDetail"
						:custom-style="{width:'100%'}" placeholder="请输入您要反馈的问题"></u-input>
				</view>
				<view class="feedback__content__compute">{{formData.feedbackDetail.length}}/500</view>
			</view>
		</view>

		<template #footer>
			<view class="common-footer">
				<u-button style="width:100%;" type="primary" size="large" :fill="true" @click="tapSubmit">提交</u-button>
			</view>
		</template>
		<u-top-tips ref="tipsRef"></u-top-tips>
		<LoginPopup @success="loadData"></LoginPopup>
	</Layout>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { isLogin } from '@/utils/auth';
	import { useAuthStore } from "@/stores";
	import type { AnyObj } from '@/types/global';
	import { useShowTipMessage } from '@/hooks/util';
	import { saveFeedback } from '@/apis/feedback';
	import { getAccountInfo } from '@/apis/auth';
	import { isResultSuccess } from '@/utils/http';
	import { onLoad } from '@dcloudio/uni-app';
	const [tipsRef, showTipMessage] = useShowTipMessage();
	const authStore = useAuthStore();
	const formData = ref({
		feedbackDetail: '',
		nickname: '',
		contactPhone: '',
		feedbackType: 2,
	});

	function loadData() {
		getAccountInfo().then((res) => {
			formData.value.nickname = res.data?.nickname ?? '';
			formData.value.contactPhone = res.data?.phoneNumber ?? '';
		});
	}


	onLoad(() => {
		loadData();
	});

	function tapSubmit() {
		if (!isLogin()) {
			authStore.show();
			uni.showToast({
				icon: 'none',
				title: '请先登录'
			});
			return
		}
		const { feedbackDetail } = formData.value;
		if (feedbackDetail.length < 10 || feedbackDetail.length > 500) {
			showTipMessage('请输入反馈内容，长度 10 ~ 500 个字符', 'error');
			return;
		}

		saveFeedback({ ...formData.value }).then((res) => {
			if (!isResultSuccess(res)) return;
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/mine/mine'
				});
			}, 1500);
		})
	}
</script>

<style lang="scss" scoped>
	.feedback {

		&__content {
			position: relative;
			display: inline-flex;
			align-self: center;
			flex-shrink: 0;
			width: 690rpx;
			margin-top: 40rpx;
			padding: 30rpx 24rpx 50rpx 24rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 12rpx;

			&__textarea {
				display: inline-block;
				width: 100%;
				min-height: 384rpx;
				max-height: 50vh;
				overflow-y: auto;
			}

			&__compute {
				position: absolute;
				right: 30rpx;
				bottom: 26rpx;
				display: inline-block;
				font-weight: 400;
				font-size: 28rpx;
				color: #909090;
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding-top: 32rpx;
			padding-right: 32rpx;
			padding-left: 32rpx;
			box-sizing: border-box;
			background-color: white;

			button {
				margin-bottom: 32rpx;
			}
		}
	}
</style>